<template>
	<view>
		<header-top :messageInfo="{typeFlag:true,message:'客户信息编辑'}"></header-top>
		<view class="mainpaddingbtn">
			<view class="mainpadding">
				<view class="strongtext">公司名称</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户名称" v-model="customergs">
				</view>
				<view class="strongtext margin_top">客户姓名</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户姓名" v-model="customername">
				</view>
				<view class="strongtext margin_top">客户电话</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户电话" v-model="customermobile">
				</view>
				<view class="tsflex margin_top">
					<view class="strongtext">客户类型</view>
					<view class="flexcenter radius birthday" @click="khlxshow=true">
						<view class="selecttext" style="color: #999;">{{khlx?khlx:"请选择客户类型"}}</view>
						<view class="selecticon"></view>
					</view>
					<!-- 客户类型 -->
					<u-picker :show="khlxshow" keyName="name" :columns="khlxcolumns" title="选择客户类型" @confirm="khlxconfirm" @cancel="khlxshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">店铺地址</view>
				<view class="flexbetween iteminput">
					<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区" v-model="area"
						 @change="bindPickerChange">
						<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="address"></view>
				</view>
				<view class="strongtext margin_top">详细地址</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入详细地址" v-model="customeraddress">
				</view>
				<view class="flexbetween margin_top">
					<view class="tsflex">
						<view class="strongtext">修改行业</view>
						<view class="flexcenter radius birthday" @click="hyshow=true">
							<view class="selecttext">{{hy?hy:"请选择行业"}}</view>
							<view class="selecticon"></view>
						</view>
						<!-- 行业 -->
						<u-picker :show="hyshow" keyName="name" :columns="hycolumns" title="选择行业" @confirm="hyconfirm" @cancel="hyshow=false"></u-picker>
					</view>
					<view class="tsflex">
						<view class="strongtext">经营范围</view>
						<view class="flexcenter radius birthday"  @click="jyclick">
							<view class="selecttext">{{jyvalue?jyvalue:"请选择经营范围"}}</view>
							<view class="selecticon"></view>
						</view>
						<!-- 经营范围 -->
						<u-picker :show="jyshow" keyName="name" :columns="jycolumns"  title="选择经营范围" @confirm="jyconfirm" @cancel="jyshow=false"></u-picker>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="strongtext">客户合同到期提醒</view>
					<view class="flexright">
						<view class="strongtext switch">{{switchvalue?'开':'关'}}</view>
						<u-switch v-model="switchvalue" size="28" activeColor="#3476fe" ></u-switch>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="strongtext">购买套餐</view>
					<view class="strongtext">{{dk_num}}</view>
				</view>
				<!-- <view class="khzr radius margin_top">
					<text class="flexcenter" @click="transfer">客户转让</text>
				</view> -->
				<!-- <view class="flexleft margin_top">
					<view class="tsflex">
						<view class="strongtext">购买端口修改</view>
						<view class="flexaround addradios margin_top">
							<view class="fadd" @click="dk_num++"></view>
							<view class="number">{{dk_num}}</view>
							<view class="freduce" @click="reducenum"></view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="posibtn" @click="submit">
			<view class="btn radius">确认修改</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				// 客户类型
				khlx:"",//客户类型
				khlxshow:false,
				khlxcolumns:[],
				khlxid:"",
				// 行业
				hy:"",
				hyshow:false,
				hycolumns:[[{id:1,name:""}]],
				hyid:"",
				//经营范围
				jyvalue:"",
				jyshow:false,
				jycolumns:[[{id:1,name:""}]],
				jyid:"",//经营范围id
				
				switchvalue:false,//滑块
				dk_num:0,//端口数量
				area: [],// 选择地区内容
				address: {
					province: "",
					city: "",
					county: ""
				},
				items: citys.data,// 选择地区内容
				customerid:"",//用户id
				customergs:"",//公司名称
				customername:"",//客户姓名
				customermobile:"",//客户电话
				customeraddress:"",//详细地址
			}
		},
		onLoad(options) {
			this.customerid = options.id
			this.getinfo()
			this.gethy()
		},
		methods: {
			// 获取用户当前信息
			getinfo(){
				httpRequest.request('appapi/staff/customers/info', 'POST', {
					id:this.customerid
				}).then(res => {
					let data = res.data.info
					this.customergs = data.gongsi
					this.customername = data.name
					this.customermobile = data.mobile
					this.khlxid = data.type
					this.khlx = data.typename
					this.customeraddress = data.address
					this.hy = data.hangye
					this.hyid = data.hangye_id
					this.jyid = data.jingying_id
					this.jyvalue = data.jingying
					this.dk_num = data.duankou
					this.switchvalue = data.tixing==1?true:false
					this.area = data.dianpu.split("/")
				})
			},
			submit(){
				httpRequest.request('appapi/staff/customers/khinfoEdit', 'POST', {
					id:this.customerid,
					mobile:this.customermobile,
					name:this.customername,
					type:this.khlxid,
					gongsi:this.customergs,
					address:this.customeraddress,
					dianpu:this.area[0]+"/"+this.area[1]+"/"+this.area[2],
					hangye:this.hyid,
					jingying:this.jyid,
					tixing:this.switchvalue?1:2
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					}
				})
			},
			// 获取行业
			gethy(){
				httpRequest.request('appapi/staff/customers/category', 'POST', {
					id:0
				}).then(res => {
					let aa = []
					aa.push(res.data.hangye)
					this.hycolumns = aa
					this.khlxcolumns.push(res.data.kehufenlei)
				})
			},
			// 端口加减
			reducenum(){
				if(this.dk_num==0){
					return false
				}
				this.dk_num--
			},
			// 客户类型确认
			khlxconfirm(e){
				this.khlxshow = false
				this.khlxid = e.value[0].id
				this.khlx = e.value[0].name
			},
			// 行业确认
			hyconfirm(e){
				this.hyshow = false
				this.hyid = e.value[0].id
				this.hy = e.value[0].name
				this.getjy()
			},
			// 判断是否选择行业
			jyclick(){
				if(this.hyid==""){
					httpRequest.toast("请先选择行业")
					return false
				}
				this.jyshow = true
			},
			// 获取经验范围
			getjy(){
				httpRequest.request('appapi/staff/customers/category', 'POST', {
					id:this.hyid
				}).then(res => {
					let aa = []
					aa.push(res.data.fanwei)
					this.jycolumns = aa
				})
			},
			// 经验范围确认
			jyconfirm(e){
				this.jyshow = false
				this.jyid = e.value[0].id
				this.jyvalue = e.value[0].name
				console.log(e)
			},
			bindPickerChange(val) {// 选择地区内容
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
			// 客户转让
			transfer(){
				uni.navigateTo({
					url:'/pages/customertransfer/customertransfer'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selecttext{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}
	.mainpaddingbtn{
		padding: 0 30rpx 150rpx 30rpx;
	}
	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.margin_top {
		margin-top: 20rpx;
	}

	.iteminput {
		padding: 20rpx 30rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}
	.iteminput{
		input{
			width: 100%;
		}
	}
	// 上传图片
	.bigbox {
		height: 325rpx;
		width: 100%;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.selecticon {
		margin-left: 10rpx;
		background-image: url('@/static/imags/upload/select.png');
		background-size: 100% 100%;
	}

	.selecttext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.address {
		width: 50rpx;
		height: 47rpx;
		background-image: url("@/static/imags/upload/address.png");
		background-size: 100% 100%;
	}

	.sexinput {
		width: 159rpx;
		padding: 20rpx 0;
		border: 1rpx solid #999999;
		text-align: center;
	}

	.birthday {
		padding: 20rpx 10rpx;
		border: 1rpx solid #999999;
	}

	.addempoly {
		margin-top: 60rpx;
	}
	.tsflex{
		flex-direction: column;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.posibtn{
		position: fixed;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 0 66rpx;
	}
	.switch{
		margin-right: 30rpx;
		
	}
	.khzr{
		display: inline-block;
		padding: 30rpx;
		color: #fff;
		font-weight: 800;
		background-color: #3476fe;
	}
	.fadd{
		width: 23rpx;
		height: 23rpx;
		background-image: url('../../static/imags/myemploy/fadd.png');
		background-size: 100% 100%;
	}
	.freduce{
		width: 23rpx;
		height: 5rpx;
		background-image: url('../../static/imags/myemploy/freduce.png');
		background-size: 100% 100%;
	}
	.addradios{
		width: 200rpx;
		border-radius: 50rpx;
		background-color: #999;
		color: #fff;
		padding: 10rpx 0;
	}
	.number{
		width: 60rpx;
		text-align: center;
	}
</style>
